<template>
  <div class="workbench-wrapper group-form">
    <container-box :metaTitle="routeMeta.title || ''">
      <mds-card slot="container">
        <div slot="header">
          <span>{{ routeMeta.title || '' }}</span>
        </div>
        <div>
          <div class="form">
            <div class="group-title">分组1</div>
            <p>
              <label>文本输入框</label>
              <mds-input
                placeholder="Basic usage"
                v-model="form.a"
              ></mds-input>
            </p>
            <p>
              <label>文本输入框</label>
              <mds-input
                placeholder="Basic usage"
                v-model="form.b"
              ></mds-input>
            </p>
            <p>
              <label>下拉已选</label>
              <mds-select
                :value="form.c"
                clearable
                placeholder="请选择"
                @change="handleChange($event,'c')"
              >
                <mds-option value="选项一">选项一</mds-option>
                <mds-option value="选项二">选项二</mds-option>
              </mds-select>
            </p>
            <p>
              <label>下拉未选</label>
              <mds-select
                :value="form.d"
                clearable
                placeholder="请选择"
                @change="handleChange($event,'d')"
              >
                <mds-option value="选项一">选项一</mds-option>
                <mds-option value="选项二">选项二</mds-option>
              </mds-select>
            </p>
            <p>
              <label>日期选择</label>
              <mds-date-picker
                v-model="form.e"
                type="date"
                placeholder="选择日期"
              ></mds-date-picker>
            </p>
            <p>
              <label>日期选择</label>
              <mds-date-picker
                v-model="form.f"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></mds-date-picker>
            </p>
            <div class="group-title">分组2</div>
            <p style="width:100%;">
              <label>单项选择</label>
               <mds-radio-group
                v-model="form.g"
              >
                <mds-radio value="a">按城市计划</mds-radio>
                <mds-radio value="b">按部门计划</mds-radio>
                <mds-radio value="c">按部门计划</mds-radio>
                <mds-radio value="d">按部门计划</mds-radio>
              </mds-radio-group>
            </p>
            <p style="width:100%;">
              <label>多项选择</label>
              <mds-checkbox-group
                v-model="form.h"
                :options="options1"
              ></mds-checkbox-group>
            </p>
            <p style="width:100%;">
              <label style="align-self: flex-start;">文本域</label>
              <mds-input-textarea
                rows="3"
                v-model="form.i"
              ></mds-input-textarea>
            </p>
            <div class="button-wrap">
              <mds-button type="primary">保存并预览</mds-button>
              <mds-button>取消</mds-button>
            </div>
          </div>
        </div>
      </mds-card>
    </container-box>
  </div>
</template>

<script>
import ContainerBox from '@/components/ContainerBox'

export default {
  components: {
    ContainerBox
  },
  data() {
    return {
      options1: ['已经选中项', '未选中项'],
      form: {
        a: '',
        b: '',
        c: '选项一',
        d: '',
        e: '',
        f: '',
        g: '',
        h: [],
        i: ''
      }
    }
  },
  computed: {
    routeMeta() {
      return this.$route.meta || {}
    }
  },
  methods: {
    handleChange(val, key) {
      this.form[key] = val
    }
  }
}
</script>
<style lang="scss">
.group-form{
  .group-title{
    width: 100%;
    font-size: 16px;
    font-weight:500;
    margin:10px 0;
    border-left: 3px solid #0364FF;
    height: 20px;
    padding-left: 20px;
    line-height: 20px;
  }
  .mds-select,.mds-date-editor{
    width: 100%;
    margin: 0;
  }
  .button-wrap{
    margin: 20px auto;
  }
  .form{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    >p{
      width: 30%;
      display: flex;
      flex-direction: column;
      margin-top: 20px;
      >label{
        color: #7F8FA4;
        width: 70px;
        margin-bottom: 10px;
        flex: none;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient:vertical;
        flex-direction: column;
      }

    }
  }
}

</style>

